
<template>
    
    <div class="layout">
        <router-view></router-view>
        <footer class="layout-footer">
            <div class="layout-footer-box">
                <router-link to="/index" active-class="active">
                    
                    <van-icon name="home-o" size="25" />
                    <p>首页</p>
                </router-link>
                <router-link to="/list" active-class="active">
                    <van-icon name="chat-o" dot />
                    <p>消息</p>
                </router-link>
                <router-link to="/my" active-class="active">
                    <van-icon name="user-circle-o" size="25" />
                    <p>我的</p>
                </router-link>
            </div>
        </footer>

    </div>
</template>
<style lang="less">
@import './assets/css/varible.less';
@import './assets/css/reset.css';

.layout-footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
.layout-footer-box{
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: #f0f0f0;
    a{
        flex-shrink: 0;
        flex-basis: 33.33333%;
        text-align: center;
        p{
            font-size: 15px;
            font-weight: bold;
        }
        &.active{
            color:@activeColor;
            
        }
    }
}

</style>